<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<style type="text/css">
			.talk_con {
				width: 600px;
				height: 500px;
				border: 1px solid #666;
				margin: 50px auto 0;
				background: #f9f9f9;
			}
			
			.talk_show {
				width: 580px;
				height: 420px;
				border: 1px solid #666;
				background: #fff;
				margin: 10px auto 0;
				overflow: auto;
			}
			
			.talk_input {
				width: 580px;
				margin: 10px auto 0;
			}
			
			.whotalk {
				width: 80px;
				height: 30px;
				float: left;
				outline: none;
			}
			
			.talk_word {
				width: 420px;
				height: 26px;
				padding: 0px;
				float: left;
				margin-left: 10px;
				outline: none;
				text-indent: 10px;
			}
			
			.talk_sub {
				width: 56px;
				height: 30px;
				float: left;
				margin-left: 10px;
			}
			
			.atalk {
				margin: 10px;
			}
			
			.atalk span {
				display: inline-block;
				background: #0181cc;
				border-radius: 10px;
				color: #fff;
				padding: 5px 10px;
			}
			
			.btalk {
				margin: 10px;
				text-align: right;
			}
			
			.btalk span {
				display: inline-block;
				background: #ef8201;
				border-radius: 10px;
				color: #fff;
				padding: 5px 10px;
			}
		</style>
	</head>

	<body>
		<div class="talk_con">
			<div class="talk_show" id="words">
				<div class="atalk"><span>A说：吃饭了吗？</span></div>
				<div class="btalk"><span>B说：还没呢，你呢？</span></div>
			</div>
			<div class="talk_input">
				<!--
        		通过select的value值判断是谁说的
        	-->
				<select class="whotalk" id="who">
					<option value="0">A说：</option>
					<option value="1">B说：</option>
				</select>
				<input type="text" class="talk_word" id="talkwords">
				<input type="button" value="发送" class="talk_sub" id="talksub">
			</div>
		</div>
	</body>

	<script type="text/javascript">
		// 发送按钮
		var oBtn = document.getElementById("talksub")
		// 文本输入框
		var oTalkWords = document.getElementById("talkwords")
		// 文本展示框
		var oWords = document.getElementById("words")
		// 谁说
		var oWho =  document.getElementById("who")
		
		// 给发送按钮设置点击事件
		oBtn.onclick = function() {
			
			if (oTalkWords.value == '') {
				alert('亲，请输入你说的话')
				return
			}
			
			// 因为我说的话，需要连接在后面，所以是+=
			//			oWords.innerHTML += oTalkWords.value
			// 判断是A说的话，还是B说的话
			if (oWho.value == 0) {
				oWords.innerHTML += '<div class="atalk"><span>' + oTalkWords.value + '</span></div>'
			} else{
				oWords.innerHTML += '<div class="btalk"><span>' + oTalkWords.value + '</span></div>'
			}
			// 设置文本输入框为空
			oTalkWords.value = ''
			// 让文本输入框，主动获取到焦点
			oTalkWords.focus()
			// 让文本输入框自动往下走
			oWords.scrollTop = '99999'
		}
	</script>

</html>